
<template>
    <div>
        <h1>显示列表</h1>
        电话:<input type="text" v-model="info.phone">
        状态:  <select v-model="info.sid">
            <option value="">请选择</option>
            <option :value="item.stateid" v-for="item in level" :key="item.stateid">{{item.statename}}</option>  
        </select>
        <input type="button" value="查询" @click="GetList" style="background-color: aquamarine;">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>商铺ID</td>
                    <td>商品编号</td>
                    <td>楼层</td>
                    <td>业主</td>
                    <td>联系电话</td>
                    <td>建筑面积</td>
                    <td>室内面积</td>
                    <td>起租时间</td>
                    <td>截止时间</td>
                     <td>租金</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
                <tr v-for="value in list">
                    <td>{{value.id}}</td>
                    <td>{{value.idnum}}</td>
                    <td>{{value.floor}}</td>
                    <td>{{value.owner}}</td>
                    <td>{{value.phone.substr(0,3)+"****"+value.phone.substr(7)}}</td>
                    <td>{{value.area}}</td>
                    <td>{{value.areatwo}}</td>
                    <td>{{moment(value.starttime).format("YYYY-MM-DD")}}</td>
                    <td>{{moment(value.endtime).format("YYYY-MM-DD")}}</td>
                    <td>{{value.money}}</td>    
                    <td>{{value.statename}}</td>
                    <td>
                        <input type="button" value="出租" v-if="value.sid==3" @click="updatestate(value.id,1)" style="background-color: chartreuse;">
                        <input type="button" value="出售" v-if="value.sid==3" @click="updatestate(value.id,2)" style="background-color:chocolate;">              
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
let list:any=ref([]);
let level:any=ref([]);


let info:any=ref({
    phone:"",
    sid:""
})

onMounted(()=>{
    GetList();
    GetLevel();
})
const updatestate=(id:any,state:any)=>{
        console.log('id=',id,'state=',state)
       let f=confirm("确认要修改吗?")
       axios({
        url:'https://localhost:7058/api/Shop/UpdateState',
        method:'get',
        params:{
            id:id,
            state:state,
        }
       })
       .then((res)=>{
        console.log(res);
        if(res.data>0){
            alert("修改成功");
            GetList();
        }
       
       })
       .catch((err)=>{
        console.log(err);
       })
}

const GetLevel=()=>{
    axios({
        url:'https://localhost:7058/api/Shop/GetLevel',
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        level.value=res.data
    })
    .catch((err)=>{
        console.log(err);
    })
}
const GetList=()=>{
    axios({
        url:'https://localhost:7058/api/Shop/GetList',
        method:'get',
        params:info.value
    })
    .then((res)=>{
        console.log(res);
        list.value=res.data
    })
    .catch((err)=>{
        console.log(err)
    })
}
</script>

<style scoped>

</style>    